import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import _isFunction from 'lodash/isFunction'
import toString from 'lodash/toString'
import AtComponent from '../../common/component'

const arrowRight = 'https://public-web-resources.51yzone.com/images/arrow-right.png'
export default class AtListItem extends AtComponent {
  handleClick = (...args) => {
    if (_isFunction(this.props.onClick) && !this.props.disabled) {
      this.props.onClick(...args)
    }
  }
  render() {
    const {
      thumb,
      icon,
      renderLabel,
      arrow,
      align,
      textAlign,
      multipleLine,
      wrap,
      disabled,
      customStyle,
      required,
      border,
      idName,
      labelPlacement
    } = this.props
    let { label, brief } = this.props
    label = toString(label)
    brief = toString(brief)
    const rootClass = classNames(
      'at-list__item',
      {
        [`at-list__item--${align}`]: align,
        'at-list__item--wrap': wrap,
        'at-list__item--thumb': thumb,
        'at-list__item--multiple': multipleLine,
        'at-list__item--disabled': disabled,
        'at-list__item--no-border': !border
      },
      this.props.className
    )

    const iconClass = classNames(
      icon.prefixClass || 'at-icon',
      {
        [`${icon.prefixClass || 'at-icon'}-${icon.type}`]: icon.type
      },
      icon.className
    )

    const extraClass = classNames('item-extra', {
      'at-list__item-extra': textAlign === 'right',
      'at-list__item-extra--align-left': textAlign === 'left'
    })

    return (
      <View className={rootClass} id={idName} onClick={this.handleClick} style={customStyle}>
        {required && <View className='at-list__item--required'>*</View>}
        <View
          className={classNames('at-list__item-container', {
            'at-list__item-container-vertical': labelPlacement === 'vertical'
          })}
        >
          {thumb && (
            <View className='at-list__item-thumb item-thumb'>
              <Image className='item-thumb__info' mode='scaleToFill' src={thumb} />
            </View>
          )}
          {icon.type && (
            <View className='at-list__item-icon item-icon'>
              <Text
                className={iconClass}
                style={this.mergeStyle(
                  {
                    color: icon.color || '',
                    fontSize: `${icon.size || 24}px`
                  },
                  icon.customStyle
                )}
              ></Text>
            </View>
          )}
          <View className='at-list__item-content item-content item-content-left'>
            <View className='item-content__info'>
              <View className='item-content__info-title'>
                {label}
                {renderLabel()}
              </View>
              {brief && <View className='item-content__info-note'>{brief}</View>}
            </View>
          </View>
          <View className={extraClass}>
            <View
              className={classNames('item-extra__info', {
                'item-extra__info-without-arrow': !arrow
              })}
            >
              {this.props.children}
            </View>
            {arrow ? (
              <View className='item-extra__icon'>
                <Image className='item-extra__icon-image' src={arrowRight} />
                {/* <Text className={`at-icon item-extra__icon-arrow at-icon-${arrow}`} /> */}
              </View>
            ) : null}
          </View>
        </View>
      </View>
    )
  }
}

AtListItem.defaultProps = {
  thumb: '',
  icon: {},
  label: '',
  renderLabel: () => {},
  brief: '',
  align: 'middle',
  textAlign: 'right',
  multipleLine: false,
  wrap: true,
  required: false,
  disabled: false,
  border: true,
  onClick: () => {},
  labelPlacement: 'horizontal'
}

AtListItem.propTypes = {
  thumb: PropTypes.string,
  label: PropTypes.string,
  renderLabel: PropTypes.func,
  brief: PropTypes.string,
  arrow: PropTypes.oneOf(['up', 'down', 'right']),
  align: PropTypes.oneOf(['top', 'middle', 'bottom']),
  textAlign: PropTypes.oneOf(['left', 'right']),
  required: PropTypes.bool,
  multipleLine: PropTypes.bool,
  wrap: PropTypes.bool,
  border: PropTypes.bool,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  icon: PropTypes.shape({
    size: PropTypes.number,
    type: PropTypes.string,
    color: PropTypes.string,
    prefixClass: PropTypes.string,
    customStyle: PropTypes.object,
    idName: PropTypes.string,
    className: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
  })
}
